<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webssh</title>
    <link rel="stylesheet" href="/assets/css/xterm.css"/>
    <link rel="stylesheet" href="/assets/css/webssh.css"/>
    <link rel="stylesheet" href="/assets/libs/bootstrap/css/bootstrap.min.css"/>
    <style>
        .input-width {
            width: 20%;
            display: inline-block;
        }

        .hide {
            display: none;
        }
    </style>
	
	<script>
		function checkwindow() {
			event.returnValue=false;
		}
	</script>
	
</head>


<body>

<div style="margin-top: 20px;" class="col-sm-12" id="form">
    <form class="form-horizontal col-sm-12">
        <div class="form-group row align-content-center">
            <label class="col-form-label col-sm-2 text-sm-center">主机地址：</label>
            <div class="col-sm-3">
                <input type="text" id="host" class="form-control text-center" required="" placeholder="请输入主机IP" value="127.0.0.1">
            </div>
        </div>

        <div class="form-group row align-content-center">
            <label class="col-form-label col-sm-2 text-sm-center">端口：</label>
            <div class="col-sm-3">
                <input type="number" id="port" class="form-control  text-center" required="" placeholder="请输入ssh端口" value="22">
            </div>
        </div>

        <div class="form-group row align-content-center">
            <label class="col-form-label col-sm-2 text-sm-center">用户名：</label>
            <div class="col-sm-3">
                <input type="text" id="user" class="form-control text-center" required="" placeholder="请输入用于连接的用户名" value="root">
            </div>
        </div>

        <div class="form-group row align-content-center">
                <label class="col-form-label col-sm-2 text-sm-center">认证类型：</label>
                <div class="col-sm-3">
                    <select class="custom-select mb-3" id="auth">
                        <option selected value="pwd">密码认证</option>
                        <option value="key">秘钥认证</option>
                    </select>
                </div>
        </div>

        <div class="form-group row align-content-center">
            <label class="col-form-label col-sm-2 text-sm-center">密码：</label>
            <div class="col-sm-3">
                <input type="password" class="form-control text-center" id="password" placeholder="请输入密码">
            </div>
        </div>

        <div class="form-group row align-content-center">
            <label class="col-form-label col-sm-2 text-sm-center">秘钥文件：</label>
            <div class="col-sm-3">
                <input type="file" id="pkey">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label"></label>
            <div class="col-sm-10">
                <span id="helpBlock" class="help-block">
                   注意:
                    <p style="color: red">1、当认证类型为密码认证时, 秘钥输入框的内容将被忽略</p>
                    <p style="color: red">2、当认证类型为秘钥认证时, 如果密码输入框不为空, 则密码输入框的内容将作为秘钥的解密密码</p>
                </span>
            </div>
        </div>


        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" onclick="websocket()">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
                </button>
            </div>
        </div>
    </form>
</div>

<div id="django-webssh-terminal" class="hide">
    <div id="terminal"></div>
</div>


<script src="/assets/libs/jquery/jquery.min.js"></script>
<script src="/assets/js/xterm.js"></script>
<script src="/assets/js/webssh.js"></script>
</body>
</html>